﻿@page
@using Volo.Abp.AspNetCore.Mvc.UI.Layout
@model YaAppoint.Web.Pages.Appointments.PlanPools.IndexModel
@inject IPageLayout PageLayout
@await Component.InvokeAsync("PlanPoolWidget")
@{
    PageLayout.Content.Title = "号池计划";
}
@section styles
{
    <abp-style src="/Pages/Appointments/PlanPools/Index.css"></abp-style>
}
@section scripts
{
    <abp-script src="/Pages/Appointments/PlanPools/Index.cshtml.js"></abp-script>
}
<div class="content-container">
    <div id="app">
        <div class="title-container">
            <div>
                <span>{{department?department.name:''}}-{{deviceType?deviceType.name:''}}-{{schedule?schedule.name:''}}</span>
            </div>
            <div class="legend">
                <div class="allow-over" style="opacity:0.5; background-color:#67C23A;width:10px;height:10px;margin-left:15px;border-radius:100%;"></div>
                <div style="font-size:15px;font-weight:300;" >可超限</div>
            </div>
        </div>
        <el-row>
            <el-col :span="22">
                <div class="grid-content bg-purple-dark">
                    <el-button v-on:click="deleteMany" icon="el-icon-delete" size="mini" v-if="planPoolDeletePermission">删除</el-button>
                    <el-button v-on:click="showBatchCreate" icon="fa fa-wand-magic-sparkles" size="mini" v-if="planPoolBatchCreatePermission">批量生成</el-button>
                </div>
            </el-col>
            <el-col :span="2">
                <el-button v-on:click="deleteAll" type="danger" icon="el-icon-delete" size="mini" v-if="planPoolClearPermission">清空计划</el-button>
            </el-col>
        </el-row>
        <hr class="line-gray" />
        <div class="container-body">
            <div class="table-container">
                <el-table :data="tableData" empty-text="请先配置预约时段" height="200" size="mini" class="el-table" row-key="id" :key="tableKey" ref="scheduleTable" border>
                    <el-table-column label="时段" property="intervalName" align="center">
                        <template slot-scope="scope">
                                <span style="font-size:14px;">{{scope.row.name}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column :label="column.label" align="center" :key="index" v-for="(column,index)  in dayInWeeks">
                        <template slot-scope="scope">
                            <plan-pool :schedule-id="schedule.id" 
                                       :key="schedule.id+index+scope.row.id"
                                       :day-in-week="index" 
                                       :time-interval-id="scope.row.id" 
                                       :delete-permission="planPoolDeletePermission"
                                       :edit-permission="planPoolEditPermission"
                                       :ref="String(index)+String(scope.$index)"
                                       :ref-name="String(index)+String(scope.$index)"
                                       v-on:selected-change="cellSelectedChange"
                                       v-on:delete="deletePlanPool"
                                       v-on:edit="showEdit"
                                       v-on:create="showCreate"></plan-pool>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>

        <!--创建与编辑对话框-->
        <el-dialog  :visible.sync="dialogVisible" width="500px" v-on:close="resetForm" :close-on-click-modal="false">
            <template v-slot:title>
                <div class="dia-title-container">
                      <div class="main-title">
                        <span>{{ dialogTitle }}</span>
                      </div>
                      <div class="title-detail">
                        <span style="font-size:12px;" >{{detailTitleWeekDay}}</span>
                        <span style="font-size:12px;margin-left:10px;">{{detailTitleInterval}}</span>
                      </div>
                </div>
            </template>
            <el-form :model="planPool" label-width="100px" ref="dialogForm" :rules="rules">
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="最大个数" prop="maxCount">
                                <el-input v-model.trim="planPool.maxCount" type="number" step="1" size="mini" autocomplete="off" clearable></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="允许超限">
                                <el-switch v-model="planPool.allowOverFlow" size="mini">
                                </el-switch>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="活动">
                                <el-switch v-model="planPool.isActive">
                                </el-switch>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" v-on:click="save" size="mini">保存</el-button>
                <el-button v-on:click="resetForm" size="mini">取 消</el-button>
            </div>
        </el-dialog>

        <!--批量创建-->
        <el-dialog title="批量生成号池计划" :visible.sync="batchCreatVisible" width="600px" v-on:close="resetBatchForm" :close-on-click-modal="false">
            <el-form :model="batchModel" label-width="100px" ref="batchForm" :rules="batchRules">
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="开始时间" prop="startTime">
                                <el-time-picker v-model="batchModel.startTime"
                                                size="mini"
                                                style="width:100%;"
                                                clearable
                                                editable
                                                :picker-options="batchStartTimePockerOption"
                                                :value-format="valueFormat"
                                                v-on:change="batchStartTimeChange"
                                                placeholder="开始时间">
                                </el-time-picker>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="结束时间" prop="endTime" >
                                <el-time-picker v-model="batchModel.endTime"
                                                style="width:100%;"
                                                size="mini"
                                                :picker-options="batchEndTimePickerOption"
                                                :value-format="valueFormat"
                                                v-on:change="batchEndTimeChange"
                                                clearable
                                                editable
                                                placeholder="结束时间">
                                </el-time-picker>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="周几" prop="dayInWeeks">
                                <el-select size="mini" v-model="batchModel.dayInWeeks" multiple placeholder="请选择" style="width:100%;">
                                    <el-option v-for="item in dayInWeeks"
                                               :key="item.value"
                                               :label="item.label"
                                               :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="最大个数" prop="maxCount">
                                <el-input type="number" step="1" v-model="batchModel.maxCount" size="mini" autocomplete="off" clearable></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="允许超限">
                                <el-switch v-model="batchModel.allowOverFlow" size="mini">
                                </el-switch>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" v-on:click="batchCreate" size="mini">确定</el-button>
                <el-button v-on:click="resetBatchForm" size="mini">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</div>